import React from "react";

import {
    listCommands,
    listAvatars,
    getItems,
    getEntities,
    getScenes,
    listQuests,
    getMainQuestFor
} from "@backend/data";

import "@css/views/PlainText.scss";

class PlainText extends React.PureComponent {
    /**
     * Creates a paragraph of commands.
     * @private
     */
    private getCommands(): React.ReactNode {
        return (
            <>
                {listCommands().map((command) => (
                    <p key={command.name[0]}>{`${command.name[0]} : ${command.description}`}</p>
                ))}
            </>
        );
    }

    /**
     * Creates a paragraph of avatars.
     * @private
     */
    private getAvatars(): React.ReactNode {
        return (
            <>
                {listAvatars()
                    .sort((a, b) => a.id - b.id)
                    .map((avatar) => (
                        <p key={avatar.id}>{`${avatar.id} : ${avatar.name}`}</p>
                    ))}
            </>
        );
    }

    /**
     * Creates a paragraph of items.
     * @private
     */
    private getItems(): React.ReactNode {
        return (
            <>
                {getItems()
                    .sort((a, b) => a.id - b.id)
                    .map((item) => (
                        <p key={item.id}>{`${item.id} : ${item.name}`}</p>
                    ))}
            </>
        );
    }

    /**
     * Creates a paragraph of monsters.
     * @private
     */
    private getMonsters(): React.ReactNode {
        return (
            <>
                {getEntities()
                    .sort((a, b) => a.id - b.id)
                    .map((entity) => (
                        <p key={entity.id}>{`${entity.id} : ${entity.name}`}</p>
                    ))}
            </>
        );
    }

    /**
     * Creates a paragraph of scenes.
     * @private
     */
    private getScenes(): React.ReactNode {
        return (
            <>
                {getScenes()
                    .sort((a, b) => a.id - b.id)
                    .map((scene) => (
                        <p key={scene.id}>{`${scene.id} : ${scene.identifier} [${scene.type}]`}</p>
                    ))}
            </>
        );
    }

    /**
     * Creates a paragraph of quests.
     * @private
     */
    private getQuests(): React.ReactNode {
        return (
            <>
                {listQuests()
                    .sort((a, b) => a.id - b.id)
                    .map((quest) => (
                        <p key={quest.id}>{`${quest.id} : ${getMainQuestFor(quest)?.title ?? "Unknown"} - ${
                            quest.description
                        }`}</p>
                    ))}
            </>
        );
    }

    render() {
        return (
            <div className={"PlainText"}>
                <p>
                    // Grasscutter 3.6.0 GM Handbook
                    <br />
                    // Generated by the HTML GM Handbook.
                    <br />
                    <br />
                    <br />
                    // Commands
                </p>

                {this.getCommands()}

                <p>
                    <br />
                    <br />
                    // Avatars
                </p>

                {this.getAvatars()}

                <p>
                    <br />
                    <br />
                    // Items
                </p>

                {this.getItems()}

                <p>
                    <br />
                    <br />
                    // Monsters
                </p>

                {this.getMonsters()}

                <p>
                    <br />
                    <br />
                    // Scenes
                </p>

                {this.getScenes()}

                <p>
                    <br />
                    <br />
                    // Quests
                </p>

                {this.getQuests()}
            </div>
        );
    }
}

export default PlainText;
